<script setup>
import router from '@/router'
import JobInfoCard from './components/JobInfoCard.vue'
import { ref } from 'vue'

const options = [
  {
    value: '全部职位类型',
    label: '技术'
  }
]

const activeName = ref('first')
const goPostJob = () => {
  router.push('/enterprise/post_job')
}
</script>

<template>
  <div class="zwgl">
    <el-button @click="goPostJob" type="primary" style="height: 34px; width: 101px">
      <Plus style="width: 1em; height: 1em; margin-right: 2px; color: #fff" />
      发布职位
    </el-button>
    <div class="box">
      <el-input
        v-model="input2"
        style="width: 125px; margin-right: 10px; height: 34px"
        placeholder="搜索"
        :suffix-icon="Search"
      />
      <el-select v-model="value" placeholder="全部职位类型" style="width: 130px; height: 34px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
  <el-tabs v-model="activeName" type="" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="全部职位" name="first">
      <JobInfoCard></JobInfoCard>
      <JobInfoCard></JobInfoCard>
      <JobInfoCard></JobInfoCard>
    </el-tab-pane>
    <el-tab-pane label="开放中" name="second"><el-empty description="没有相关数据" /></el-tab-pane>
    <el-tab-pane label="待开放" name="third"><el-empty description="没有相关数据" /></el-tab-pane>
    <el-tab-pane label="审核失败" name="fourth"><JobInfoCard></JobInfoCard></el-tab-pane>
    <el-tab-pane label="已关闭" name="fifth">
      <JobInfoCard></JobInfoCard>
      <JobInfoCard></JobInfoCard>
    </el-tab-pane>
  </el-tabs>
  <div class="position_num">共3个职位</div>
  <el-pagination
    style="margin-top: 20px; justify-content: center"
    size="small"
    background
    layout="prev, pager, next"
    :total="50"
    class="mt-4"
  />
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.zwgl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.position_num {
  font-size: 13px;
  font-weight: 400;
  color: #757575;
  margin-top: 20px;
}
</style>
